<script setup>
import {onMounted, ref} from 'vue'

const flag = ref(false)
const awesome = ref(false)
const ff = ref(true)
const ff1 = ref(true)
onMounted(()=>{
  setInterval(()=>{
    ff.value = !ff.value
  },500)
})
</script>

<template>
  <h3 v-show="ff1" :style="{visibility:ff ? 'visible' : 'hidden'}">welcome</h3>
  <p v-if="flag">one</p>
  <p v-else-if="flag">two1</p>
  <p v-else-if="true">two2</p>
  <p v-else-if="flag">two3</p>
  <p v-else>three</p>
  <hr>
  <p v-show="!false">hello show</p>
  <hr>
  <button @click="awesome = !awesome">Toggle</button>

  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>

  <hr>
  <template v-if="true">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
</template>

<style scoped>
h3{
  color:red;
  visibility: visible;
}
</style>
